<template>
	<page-meta :page-style="'overflow:' + (show ? 'hidden' : 'visible')"></page-meta>
	<view class="con">
		<flCalendar
			:range="range"
			:opts="opts"
			:single="true"
			:start-date="start_date"
			:activeArray="activeArray"
			scrollHeight="1"
			@confirm="open"
			@cancel="cancel">
			<template v-slot:header>
				<view class="header">
					<image class="header_img" src="/static/56.png" mode=""></image>
					友情提示：点击可设置不可预订，点击开启预定
				</view>
			</template>
			<template v-slot:footer>
				<!-- 	<view class="footer">
					<text>已选择: {{ selectedDate }}</text>
				</view> -->
			</template>
		</flCalendar>

		<uni-popup
			ref="popup"
			type="bottom"
			background-color="#fff"
			border-radius="10px 10px 0 0"
			@change="popup_change"
			:mask-click="false">
			<view class="popup_box">
				<image class="popup_box_img" src="/static/50.png" mode="" @click="close"></image>
				<view class="popup_box_top">
					<text class="text">{{ popup_data.month }}</text>
					月
					<text class="text">{{ popup_data.day }}</text>
					日预约设置
				</view>
				<view class="popup_box_nr">
					<view class="popup_box_nr_left">是否可预订</view>
					<view class="popup_box_nr_right">
						<view class="popup_box_nr_right_nr" :class="status == 1 ? 'popup_xz' : ''" @click="status = 1">是</view>
						<view class="popup_box_nr_right_nr" :class="status == 2 ? 'popup_xz' : ''" @click="status = 2">否</view>
					</view>
				</view>
				<view class="popup_box_nr">
					<view class="popup_box_nr_left">
						房费金额
						<text class="text">(元)</text>
					</view>
					<view class="popup_box_nr_inp">
						<input class="popup_box_nr_inp_nr" type="text" placeholder="请输入该日期特定金额" v-model="price" />
						<text class="text">修改</text>
					</view>
				</view>
				<view class="popup_box_btn">
					<view class="popup_box_btn_nr btn1" @click="close">取消</view>
					<view class="popup_box_btn_nr btn2" @click="submit">确认</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script setup>
	import flCalendar from '@/components/fl-calendar/fl-calendar.vue'
	const http = inject('$http')
	const validateFields = inject('$validateFields')
	// 一些开放的设置
	const opts = reactive({
		dayHeight: '100rpx',
		daySize: '22rpx',
		yearMonthSize: '28rpx',
		background: '#fff',
		yearMonthColor: '#333',
		activeKeySize: '20rpx',
		activeKeyColor: 'red'
	})
	let id = ref('')
	let start_date = ref('')

	let show = ref(false)
	let popup = ref(null)
	let riqi = ref('')
	let status = ref(1)
	let price = ref('')

	const submit = () => {
		if (
			validateFields([
				{
					value: status.value == 2 || (status.value == 1 && price.value),
					message: '请输入价格'
				}
			])
		)
			return

		http
			.noAuthpost('/srapi/keyuan/ydshezhi', {
				id: id.value,
				riqi: riqi.value,
				status: status.value,
				price: price.value
			})
			.then((res) => {
				console.log('返回值', res)
				uni.showToast({
					mask: true,
					title: res.msg,
					icon: 'none',
					duration: 500
				})
				indexlist()
				close()
			})
	}

	const open = (e) => {
		console.log('所选日期', e.date)
		let data = e.date
		popup_data.value = data
		riqi.value = data.date
		popup.value.open()
	}

	const close = () => {
		popup.value.close()
		riqi.value = ''
		status.value = 1
		price.value = ''
	}
	const popup_change = (e) => {
		show.value = e.show
	}
	const popup_data = ref({})
	const range = reactive({})
	const activeArray = ref([])

	const indexlist = async () => {
		await http.noAuthpost('/srapi/keyuan/ydxianshi', { id: id.value }).then((res) => {
			console.log('返回值', res.data)
			activeArray.value = res.data
		})
	}
	onLoad((option) => {
		console.log('接收传参:', option)
		id.value = option.id
		indexlist()
		const today = new Date()
		today.setDate(today.getDate() - 1)
		const year = today.getFullYear()
		const month = String(today.getMonth() + 1).padStart(2, '0')
		const day = String(today.getDate()).padStart(2, '0')
		const weekdays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六']
		const weekday = weekdays[today.getDay()]
		start_date.value = `${year}-${month}-${day}`
	})
</script>

<style lang="less" scoped>
	.con {
		height: 100vh;
	}

	.header {
		padding: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #ff9600;
		background-color: #fff;
		.header_img {
			width: 28rpx;
			height: 28rpx;
			margin-right: 13rpx;
		}
	}

	.footer {
		padding: 20rpx;
		text-align: center;
	}
	.popup_box {
		position: relative;
		.popup_box_img {
			position: absolute;
			top: 0;
			right: 0;
			padding: 30rpx;
			width: 44rpx;
			height: 44rpx;
		}
		.popup_box_top {
			font-size: 32rpx;
			font-weight: 700;
			text-align: center;
			color: #000000;
			padding: 30rpx;
			.text {
				color: #3475f3;
			}
		}
		.popup_box_nr {
			padding: 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.popup_box_nr_left {
				font-size: 28rpx;
				font-weight: 700;
				color: #000000;
				margin-right: 30rpx;
				.text {
					font-size: 20rpx;
					font-weight: 700;
					color: #000000;
				}
			}
			.popup_box_nr_right {
				display: flex;
				justify-content: flex-end;
				align-items: center;
				.popup_box_nr_right_nr {
					margin-left: 20rpx;
					width: 158rpx;
					height: 64rpx;
					background: #f4f5f9;
					border: 1rpx solid #e6e7ed;
					border-radius: 12rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
					display: flex;
					/* 内容左对齐 | 内容右对齐 | 居中对齐 | 内容平均分 | 内容两侧距离相等 */
					/* justify-content: flex-start | flex-end | center | space-between | space-around */
					justify-content: center;
					/* 内容上方对齐 | 内容下方对齐 | 居中对齐 | 内容平均分 | 内容两侧距离相等 */
					/* align-items: flex-start | flex-end | center | baseline | stretch */
					align-items: center;
				}
				.popup_xz {
					background: #2266f9;
					border: 1rpx solid #2266f9;
					color: #ffffff;
				}
			}

			.popup_box_nr_inp {
				flex: 1;
				padding: 20rpx 30rpx;
				background: #f4f5f9;
				border: 1rpx solid #e6e7ed;
				border-radius: 12rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.popup_box_nr_inp_nr {
					font-size: 24rpx;
					font-weight: 500;
					color: #000000;
					flex: 1;
				}
				.text {
					font-size: 24rpx;
					font-weight: 500;
					color: #2266f9;
				}
			}
		}
		.popup_box_btn {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			box-shadow: 0rpx -4rpx 8rpx 4rpx rgba(0, 0, 0, 0.12);
			margin-top: 60rpx;
			.popup_box_btn_nr {
				width: 335rpx;
				height: 78rpx;
				border-radius: 41rpx;
				font-size: 28rpx;
				font-weight: 700;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.btn1 {
				background: #ffffff;
				border: 2rpx solid #787878;
				color: #787878;
			}
			.btn2 {
				background: #4b83fe;
				border: 2rpx solid #4b83fe;
				color: #ffffff;
			}
		}
	}
	//
</style>
